<script lang="ts" setup>
//高德地图
import AMapLoader from '@amap/amap-jsapi-loader';
import {shallowRef, onMounted,ref,reactive} from "vue";
import {getattend,getattendset,getTree} from '@/axios/user'
import type { TabsPaneContext } from 'element-plus'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
const activeName = ref('first')
const checkboxForm = ref([])//复选框的数据
let checkboxlist=ref([]);//传给后端的字符串列表   用join（,）转成字符串
//表格数据
const tableData = ref([])
let adisdone=<any>[];
  
const map = shallowRef(null);//高德地图
const background = ref(false)//分页背景色
const dialogVisible = ref(false)//打卡范围弹框
const dialogVisible1 = ref(false)//考勤设置弹框

const value1 = ref(0)//打卡里面的滑块
let listout=ref()
let newlist=ref('')
// let MYAMap = null//地图标记点

let page=ref<any>(1);
let size=ref<any>(10);
let total=ref(0)
//分页
const handleSizeChange = (val: number) => {
  size.value=val
  getdata()
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  page.value=val
  getdata()
  console.log(`current page: ${val}`)
}

//获取表格数据
let getdata=async(deptID='')=>{
  console.log(deptID)
  let res=await getattend(page.value,size.value,deptID)
  console.log(res.data.data.data.total)
  if(res.status==200){
      // const sysres=res.data.data.data.rows;
      // syslist(sysres)//根据复选框渲染数据
      total.value=res.data.data.data.total
      tableData.value=res.data.data.data.rows
      tableData.value.map((item:any)=>{
        adisdone=item.attendanceRecord
      })
  }
}

//复选框的数据
let syslist=async()=>{
  let res=await getTree();
  console.log(res)
  if(res.status==200){
    console.log(res.data.data)
    checkboxForm.value=res.data.data;
  }

}


//根据部门id查询数据
let checkoutbox=(id)=>{
  console.log(checkboxlist.value.join(','))
  getdata(checkboxlist.value.join(','))
}

//点击打开地图遮罩
let openaddress=()=>{
  dialogVisible.value=true;
  initMap()//对接高德地图
}


//考勤设置里面的tab切换
const handleClick = (tab: TabsPaneContext, event: Event) =>{
  console.log(tab, event)
}

//考勤设置   ===================需要传参数==============
// let setlist=async()=>{
//   let res=await getattendset()
//   console.log(res)
// }

//初始化地图方法
const initMap = ()=>{
  // let MYAMap = null;//地图标记点
      AMapLoader.load({
        key:"3640d50b4b9b7406b1625d0423ea15a3",// 申请好的Web端开发者Key，首次调用 load 时必填
        version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins:[],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap)=>{
        // MYAMap = AMap //在这里添加
        map.value = new AMap.Map("container",{  //设置地图容器id
          viewMode:"3D",    //是否为3D地图模式
          zoom:5,           //初始化地图级别 2-20
          center:[105.602725,37.076636], //初始化地图中心点位置
        });
      }).catch(e=>{
        console.log(e);
      })
      
}
// const marker = new MYAMap.Marker({
//    position:50,//希望它出现的位置
//    title:'北京'//标记名字
// });
// //加进地图里
// map.value.add(marker)



//公司地址
let tablist=ref([
    {
        id:1,
        address:'北京',
        title:'北京'
    },
    {
        id:2,
        address:'上海',
        title:'上海'
    },
    {
        id:3,
        address:'广州',
        title:'广州'
    }
])
//tab数据
let tabone=(id:number)=>{
    console.log(id)
    listout.value=tablist.value.filter(item=>item.id==id)
    console.log(listout.value[0].title)
    newlist.value=listout.value[0].title;
}

//设置考勤
interface RuleForm {
  region: string,
  startTime: string,
  endTime: string,
  startTime1: string,
  endTime1: string,
  status:Array<any>
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  region: '',
  startTime: '',
  endTime: '',
  startTime1: '',
  endTime1: '',
  status:[
    {
      name1:'年假',
      istrue:false
    },
    {
      name2:'事假',
      istrue:true
    },
  ]
})


//出勤设置
const rules = reactive<FormRules<RuleForm>>({
  region: [
    {
      required: true,
      message: '请选择部门',
      trigger: 'change',
    },
  ],
  startTime: [
    {
      type: 'date',
      required: true,
      message: '请选择开始时间',
      trigger: 'change',
    },
  ],
  endTime: [
    {
      type: 'date',
      required: true,
      message: '请选择结束时间',
      trigger: 'change',
    },
  ],
  startTime1: [
    {
      type: 'date',
      required: true,
      message: '请选择开始时间',
      trigger: 'change',
    },
  ],
  endTime1: [
    {
      type: 'date',
      required: true,
      message: '请选择结束时间',
      trigger: 'change',
    },
  ]
})
//保存出勤设置
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('保存更新')
    } else {
      console.log('error submit!', fields)
    }
  })
}


onMounted(()=>{
  syslist()//
  getdata()//获取考勤列表数据
})


</script>

<template>
    <el-card style="min-width:70%">
        <div class="top">
            <p>
                <span>未处理</span>
                <span>0</span>
            </p>
            <div class="devchild">
                <button class="range" @click="openaddress">打卡范围</button>
                <button class="setters" @click="dialogVisible1=true">设置</button>
            </div>
        </div>
        <el-dialog
    v-model="dialogVisible"
    title="打卡范围设置"
    width="100vw"
    :fullscreen="true"
  >
    <div style="width:100vw;height:80vh;display:flex;flex-direction: column;justify-content:space-evenly;align-items:center;">
        <div class="left" style="width:100%;height:80%;display: flex;">
           <p id="container" style="width:60%;height:100%;background-color:#ccc;">
                
           </p>
           <div class="rigbox" style="width:40%;height:80%;">
                <div class="tab" style="width:150px;height:100px;display:flex;flex-direction: column;overflow-y: auto;border: 1px solid;">
                    <p v-for="(item) in tablist" :key="item.id" style="border-bottom:1px solid; width:100%;height:50px;text-align:center;line-height:50px;"
                    @click="tabone(item.id)"
                    >{{ item.address }}</p>
                </div>
           </div>
        </div>
        <div class="right" style="width:100%;height:20%;">
            
            <div class="slider-demo-block" style="margin-left:1000px;">
                <span class="demonstration">半径</span>
                <el-slider v-model="value1" />
            </div>
        </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          批量保存
        </el-button>
      </div>
    </template>
        </el-dialog>

          <!-- 考勤设置 -->
          <el-dialog
          v-model="dialogVisible1"
          title="设置"
          width="800"
          >
          <el-tabs
          v-model="activeName"
      
          class="demo-tabs"
          @tab-click="handleClick"
        >
              <el-tab-pane label="出勤设置" name="first">
                <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item label="部门" prop="region">
      <el-select v-model="ruleForm.region" placeholder="请选择部门" style="width:200px;">
        <el-option label="传智教育" value="shanghai" />
        <el-option label="振涛教育" value="beijing" />
      </el-select>
    </el-form-item>
    
    <el-form-item label="出勤时间" required>
      <el-row>
        <el-col :span="11">
        <el-time-select
      v-model="ruleForm.startTime"
      style="width: 240px"
      :max-time="ruleForm.endTime"
      class="mr-4"
      placeholder="08:45:00"
      start="08:45"
      step="00:15"
      end="12:00"
    />
      </el-col>
      <el-col class="text-center" :span="2">
        <span class="text-gray-500">-</span>
      </el-col>
      <el-col :span="11">
        <el-time-select
      v-model="ruleForm.endTime"
      style="width: 240px"
      :min-time="ruleForm.startTime"
      placeholder="12:00:00"
      start="12:00"
      step="00:15"
      end="18:30"
    />
      </el-col>
      </el-row>
      

      <el-row>
        <el-col :span="11">
        <el-time-select
      v-model="ruleForm.startTime1"
      style="width: 240px"
      :max-time="ruleForm.endTime1"
      class="mr-4"
      placeholder="13:30:00"
      start="13:30:00"
      step="00:15"
      end="17:45:00"
    />
      </el-col>
      <el-col class="text-center" :span="2">
        <span class="text-gray-500">-</span>
      </el-col>
      <el-col :span="11">
        <el-time-select
      v-model="ruleForm.endTime1"
      style="width: 240px"
      :min-time="ruleForm.startTime1"
      placeholder="17:45:00"
      start="13:30:00"
      step="00:15"
      end="17:45:00"
    />
      </el-col>
      </el-row>
      
    </el-form-item>
    
    <el-form-item style="padding-left:50%">
      <el-button type="primary" @click="submitForm(ruleFormRef)">保存更新</el-button>
      <el-button @click="dialogVisible1 = false">取消</el-button>
    </el-form-item>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="请假设置" name="second">
                <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item label="部门" prop="region">
      <el-select v-model="ruleForm.region" placeholder="请选择部门">
        <el-option label="传智教育" value="shanghai"/>
        <el-option label="振涛教育" value="beijing"/>
      </el-select>
    </el-form-item>
    <el-form-item label="假期类型" prop="desc">
      1111
    </el-form-item>
    <el-form-item style="padding-left:50%;">
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        保存更新
      </el-button>
      <el-button>取消</el-button>
    </el-form-item>

  </el-form>
        <el-alert
            title="事假 请假单位为0.5天 只能提交工作日内的请假单"
            type="warning"
            description="当请假开关关闭后,员工则不可在员工端提交请假申请"
            show-icon
          />
              </el-tab-pane>
              <el-tab-pane label="扣款设置" name="third">扣款设置</el-tab-pane>
              <el-tab-pane label="加班设置" name="fourth">加班设置</el-tab-pane>
          </el-tabs>
          </el-dialog>


    </el-card>
    <el-card style="min-width:70%;min-height:50px;"  >
        <el-form label-width="auto" style="width:90%;">
          <el-form-item label="部门">
            <el-checkbox-group v-model="checkboxlist" style="width:90%;height:50px; display:flex;flex-wrap:wrap;">
              <el-checkbox v-for="(item,index) in checkboxForm"
              :key="item.id"
              :value="item.id"
              @change="checkoutbox(item.id)"
              >
              {{item.name}}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
    </el-card> 
    <el-card style="min-width:70%">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="序号" width="120" />
            <el-table-column prop="username" label="姓名" width="120" />
            <el-table-column prop="workNumber" label="工号" width="120" />
            <el-table-column prop="departmentName" label="部门" width="120" />
            <el-table-column prop="mobile" label="手机" width="150" />
            <el-table-column v-for="item in adisdone" :label="item.day" :key="item.id" width="150">
              <template #default>
                <span style="color:red;" v-if="item.adtStatu==2">旷工</span>
                <span v-else-if="item.adtStatu==22">休息</span>
                <span v-else>--</span>
              </template>
            </el-table-column>
        
  </el-table>
  <el-row :gutter="800">
    <el-col :span="12" :offset="6">
        <el-pagination
      v-model:current-page="page"
      v-model:page-size="size"
      :page-sizes="[10,12,14,16]"
      :background="background"
      layout="prev,pager,next"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    </el-col>
  </el-row>
  
    </el-card>
</template>

<style lang="less" scoped>
.el-alert {
  margin: 20px;
}
.el-alert:first-child {
  margin:10;
}
.el-card{
    margin:10px 0px;
}
.top{
    width:90%;
    height:60px;
    display:flex;
    justify-content: space-between;
    align-items: center;
    p{
        width:100px;
        height:60px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:space-evenly;
    }
    .devchild{
        width:240px;
        height:60px;
        display:flex;
        justify-content:space-around;
        align-items: center;
        button{
            width:100px;
            height:30px;
            display:flex;
            justify-content: center;
            align-items:center;
        }
        .range{
            border: 1px solid #ccc;
        }
        .setters{
            background-color:#3e4bfa;
            color:white;
            border: none;
        }
    }

}

.el-checkbox-group{
    width:200px;
    height:100px;
    display: flex;
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
// 滑块
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.slider-demo-block {
  max-width: 600px;
  display: flex;
  align-items: center;
}
.slider-demo-block .el-slider {
  margin-top: 0;
  margin-left: 12px;
}
.slider-demo-block .demonstration {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  line-height: 44px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0;
}
.slider-demo-block .demonstration + .el-slider {
  flex: 0 0 60%;
  margin-right:180px;
}

// tab切换
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
